<template>
    <div class="tota">
      <el-form class="form">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <el-button class="btn" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="chartBox">
        <div class="chart" ref="chart" style="height: 400px"></div>
      </div>
    </div>
  </template>
  
  <script>
  const colors = ['#5470C6', '#91CC75', '#EE6666']
  export default {
    data() {
      return {
        time: '',
        totalNum: [
          {
            order_num: 2222,
            title: '总订单',
            icon: 'iconfont icon-order',
          },
          {
            order_num: 9399,
            title: '总销售额',
            icon: 'iconfont icon-monney',
          },
          {
            order_num: 342,
            title: '今日订单数',
            icon: 'iconfont icon-order-1',
          },
          {
            order_num: 534,
            title: '今日销售额',
            icon: 'iconfont icon-dollar',
          },
        ],
        option: {
          color: colors,
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
            },
          },
          grid: {
            right: '7%',
          },
          toolbox: {
            feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true},
            },
          },
          legend: {
            data: ['蒸发量', '降水量', '平均温度'],
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true,
              },
              // prettier-ignore
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            },
          ],
          yAxis: [
            {
              type: 'value',
              name: '水量',
              position: 'left',
              alignTicks: true,
              axisLine: {
                show: true,
              },
              axisLabel: {
                formatter: '{value} ml',
              },
            },
            {
              type: 'value',
              name: '蒸发量',
              position: 'right',
              alignTicks: false,
              offset: 100,
              axisLine: {
                show: true,
                // lineStyle: {
                //   color: colors[1],
                // },
              },
              axisLabel: {
                formatter: '{value} ml',
              },
            },
            {
              type: 'value',
              name: '温度',
              position: 'right',
              alignTicks: true,
              axisLine: {
                show: true,
              },
              axisLabel: {
                formatter: '{value} °C',
              },
            },
          ],
          series: [
            {
              name: '蒸发量',
              type: 'bar',
              data: [
                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
                3.3,
              ],
            },
            {
              name: '降水量',
              type: 'bar',
              yAxisIndex: 1,
              data: [
                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
                2.3,
              ],
            },
            {
              name: '平均温度',
              type: 'line',
              yAxisIndex: 2,
              data: [
                2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
              ],
            },
          ],
        },
      }
    },
    methods: {
      getEchartData() {
        const myChart = this.$echarts.init(this.$refs.chart)
        myChart.setOption(this.option)
      },
    },
    mounted() {
      this.getEchartData()
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .tota {
    margin: 20px 0px  0px 20px;
    .form {
      .btn {
        margin-left: 10px;
      }
    }
    .chartBox {
      width: 100%;
      min-height: 300px;
      padding: 10px 20px;
      background: #fff;
      .chart {
        width: 90% !important;
      }
    }
  }
  </style>
  